<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElMessage, ElImage } from 'element-plus';
import { withBase } from 'vitepress';

const props = defineProps<{
  src: string; // 图片地址
  source: string; // 代码块HTML
  rawSource: string; // 原始代码
}>();

// 代码可见性
const isShow = ref(false);

// 切换代码可见性
const toggle = () => {
  isShow.value = !isShow.value;
};

// 隐藏代码
const hidden = () => {
  isShow.value = false;
};

// 代码块HTML
const decodedSource = computed(() => {
  return decodeURIComponent(props.source);
});

// 原始代码
const decodedRawSource = computed(() => {
  return decodeURIComponent(props.rawSource);
});

//复制代码
const copy = () => {
  const element = document.createElement('textarea');
  element.value = decodedRawSource.value;
  element.setAttribute('readonly', '');
  element.style.position = 'absolute';
  element.style.left = '-9999px';
  document.body.appendChild(element);
  element.select();

  document.execCommand('copy');
  document.body.removeChild(element);
  ElMessage({
    message: '已复制！',
    type: 'success',
  });
};
</script>

<template>
  <ClientOnly>
    <div class="demo">
      <div class="demo-header">
        <ElImage :src="withBase(src)"></ElImage>
      </div>
      <div class="demo-btn-group">
        <div class="demo-btn" title="复制代码" @click="copy">
          <svg
            preserveAspectRatio="xMidYMid meet"
            viewBox="0 0 24 24"
            width="1.2em"
            height="1.2em"
            data-v-8b2e4b12=""
          >
            <path
              fill="currentColor"
              d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"
            ></path>
          </svg>
        </div>
        <div
          class="demo-btn"
          :title="isShow ? '隐藏源代码' : '查看源代码'"
          @click="toggle"
        >
          <svg
            preserveAspectRatio="xMidYMid meet"
            viewBox="0 0 24 24"
            width="1.2em"
            height="1.2em"
            data-v-8b2e4b12=""
          >
            <path
              fill="currentColor"
              d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
            ></path>
          </svg>
        </div>
      </div>

      <div class="demo-content" v-show="isShow" v-html="decodedSource"></div>

      <div class="demo-footer" v-show="isShow" @click="hidden">
        <div class="demo-footer-icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1024 1024"
            data-v-8b2e4b12=""
          >
            <path fill="currentColor" d="M512 320 192 704h639.936z"></path>
          </svg>
        </div>
        <span class="demo-footer-text">隐藏源代码</span>
      </div>
    </div>
  </ClientOnly>
</template>

<style>
.demo {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin: 16px 0;
}

.demo-header {
  padding: 24px;
  border-bottom: 1px solid #dcdfe6;
}

.demo-btn-group {
  display: flex;
  align-items: center;
  padding: 8px;
}

.demo-btn {
  margin-right: 8px;
  font-size: 16px;
  color: #909399;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  > svg {
    width: 1em;
    height: 1em;
  }
}

.demo-btn:first-child {
  margin-left: auto;
}

.demo-content div[class*='language-'] {
  border-radius: 0 !important;
  margin: 0 !important;
}

.demo-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-top: 1px solid #dcdfe6;
  color: #909399;
  cursor: pointer;
}

.demo-footer:hover {
  color: #409eff;
}

.demo-footer-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;

  > svg {
    width: 1em;
    height: 1em;
  }
}

.demo-footer-text {
  margin-left: 10px;
  font-size: 14px;
}
</style>
